<!DOCTYPE html>
<html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml>
<head>
    <title>消防监测</title>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link Rel="SHORTCUT ICON" href="/pc/login/img/logo1.png">
    <link rel="stylesheet" href="/pc/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/pc/layout/css/news.css" media="all" />
    <style type="text/css">
    #address select{width: 6em;height: 30px;border: 1px solid #c0c0c0;border-radius: 5px;outline: none;}
    #address select option{width: 6em;max-width: 100px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
  </style>
</head>
<body  class="childrenBody" style="background-color:#eee">

<div style="padding-left:22px;">
      <!-- 烟感设备 -->
    <div style="width:400px;height:15em;margin-right: 16px;margin-bottom:15px;background-color:white;float: left;border-radius: 5%; " >
         <span style="display: block;width: 100px;margin-top: 1%;margin-left: 1%; height: 100px;background: #efefef;text-align: center;line-height: 100px;border-radius: 50%;"><img src="/NB/iff/img/yg.png" alt=""></span>
         <p style="float: right; margin-top: -3.5em; font-size: 25px; color: #1AA094; font-weight: bold; margin-right: 5em;">烟感设备</p>
         <p style="float: right; margin-top:-2em; font-size: 15px;font-weight: bold;   margin-right:9em;" >设备总数:<span style="color: red;font-family: fantasy">&nbsp;5</span></p>
         <div style="margin-top: 1%;margin-left: 2%;font-size: 15px;font-weight: bold;position: relative;">
          <span><img src="/NB/iff/img/wz.png" alt=""></span>
          <p>位置</p>
          <div id="address" style="position: absolute;left: 3em;top: 1.2em;">
              <select class="select" id="province" name="province">
                <option value="">选择区域</option>
              </select>
              
              <select name="city" id="city">
                <option value="">选择建筑</option>
              </select>
          
              <select name="town" id="town">
                <option value="">选择房间</option>
              </select>
           </div>
           <a class="layui-btn layui-btn-mini" style="height: 30px;line-height: 30px;padding: 0 11px;font-size: 12px;position: absolute;left: 27.5em;top: 1.5em;" ><i class="iconfont icon-edit"></i> 查看</a>
          </div>
          
         <div style="margin-top: 4%;font-size: 15px;font-weight: bold;">
          <span style="display: block;margin-left: 2%"><img  style="width: 20px" src="/NB/iff/img/yg1.png" alt=""></span>
           <p style="font-size: 15px;font-weight: bold;margin-top:-5%;margin-left: 8%;">设备:<span style="color: red;">0000000000000001</span></p>
         <span style="margin-top: -5%; display: block; margin-left: 58%;"><img style="width: 20px" src="/NB/iff/img/wd.png" alt=""></span>
         <p style="margin-left:63%;margin-top: -5%">设备温度:<span style="color: red;">25</span><span>℃</span></p>
         </div>
    </div>
      <!-- 喷淋设备 -->
    <div style="width:400px;height:15em;margin-right:16px;margin-bottom: 15px;background-color:white;float: left;border-radius:5%;" >
     <span style="margin-left: 1%;margin-top: 1%;display: block;border-right: 50%;width: 100px;height: 100px;background: #efefef;text-align: center;line-height: 100px;border-radius: 50%;"><img src="/NB/iff/img/pl.png" alt=""></span>
     <p style="float: right; margin-top: -3.5em; font-size: 25px; color: #1AA094; font-weight: bold; margin-right:5em;" >喷淋设备</p>
      <p style="float: right; margin-top:-2em; font-size: 15px;margin-right:9em;font-weight: bold; " >设备总数:<span style="color: red;font-family: fantasy">&nbsp;4</span></p>
       <div style="margin-top: 1%;margin-left:2%;font-size: 15px;font-weight: bold;position: relative;">
          <span><img src="/NB/iff/img/wz.png" alt=""></span>
         <p>位置</p>
         <div id="address" style="position: absolute;left: 3em;top: 1.2em;">
              <select class="select" id="province" name="province">
                <option value="">选择区域</option>
              </select>              
              <select name="city" id="city">
                <option value="">选择建筑</option>
              </select>
              <select name="town" id="town">
                <option value="">选择房间</option>
              </select>
          </div>
          <a class="layui-btn layui-btn-mini" style="height: 30px;line-height: 30px;padding: 0 11px;font-size: 12px;position: absolute;left: 27.5em;top: 1.5em;" ><i class="iconfont icon-edit"></i> 查看</a>
         </div>
         
         <div style="margin-top: 4%;font-size: 15px;font-weight: bold;">
          <span style="display: block; margin-left: 2%; "><img style="width: 20px" src="/NB/iff/img/pl1.png" alt=""></span>
         <p style="font-size: 15px;font-weight: bold;margin-top:-5%;margin-left: 7%;">设备:<span style="color: red;">0000000000000001</span></p>
          <span style="margin-top: -5%;display: block;margin-left:51%;"><img style="width: 20px" src="/NB/iff/img/sy.png" alt=""></span>
         <p style="margin-top: -5%;margin-left:57%;">水压:<span style="color: red;">25</span><span>米</span></p>   
         <span style="margin-top: -5%;display: block;margin-left:75%;"><img style="width: 20px" src="/NB/iff/img/wd.png" alt=""></span>
         <p style="margin-top: -5%;margin-left: 80%;">温度:<span style="color: red;">25</span><span>℃</span></p>
         </div>
    </div>
      <!-- 消火栓设备 -->
    <div style="width:400px;height:15em;margin-right:16px;margin-bottom:15px;background-color:white;float:left;border-radius:5%;" > 
         <span style="margin-left:1%;margin-top:1%;display: block;border-right: 50%;width: 100px;height: 100px;background: #efefef;text-align: center;line-height: 100px;border-radius: 50%;"><img src="/NB/iff/img/xhs.png" alt=""></span>
         <p style="float: right; font-weight: bold; margin-top: -3.5em; font-size: 25px; color: #1AA094; margin-right: 4em;">消火栓设备</p>
         <p style="float: right; margin-top:-2em; font-size: 15px; font-weight: bold;  margin-right:9em;" >设备总数:<span style="color: red;font-family: fantasy">&nbsp;3</span></p>
         <div style="margin-top:1%;margin-left:2%;font-size: 15px;font-weight: bold;position: relative;">
          <span><img src="/NB/iff/img/wz.png" alt=""></span>
          <p>位置</p>
          <div id="address" style="position: absolute;left: 3em;top: 1.2em;">
              <select class="select" id="province" name="province">
                <option value="">选择区域</option>
              </select>
              
              <select name="city" id="city">
                <option value="">选择建筑</option>
              </select>
          
              <select name="town" id="town">
                <option value="">选择房间</option>
              </select>
          </div>
          <a class="layui-btn layui-btn-mini" style="height: 30px;line-height: 30px;padding: 0 11px;font-size: 12px;position: absolute;left: 27.5em;top: 1.5em;" ><i class="iconfont icon-edit"></i> 查看</a>
         </div>
          <div style="margin-top: 4%;font-size: 15px;font-weight: bold;">
          <span style="display: block; margin-left: 2%; "><img style="width: 20px" src="/NB/iff/img/xhs1.png" alt=""></span>
         <p style="font-size: 15px;font-weight: bold;margin-top:-5%;margin-left: 7%;">设备:<span style="color: red;">0000000000000001</span></p>
          <span style="margin-top: -5%;display: block;margin-left:51%;"><img style="width: 20px" src="/NB/iff/img/sy.png" alt=""></span>
         <p style="margin-top: -5%;margin-left:57%;">水压:<span style="color: red;">25</span><span>米</span></p>   
         <span style="margin-top: -5%;display: block;margin-left:75%;"><img style="width: 20px" src="/NB/iff/img/wd.png" alt=""></span>
         <p style="margin-top: -5%;margin-left: 80%;">温度:<span style="color: red;">25</span><span>℃</span></p>
         </div>
    </div>
      <!-- 消防池设备 -->
   <div style="width:400px;height:15em;margin-bottom: 15px;background-color: white;float:left;border-radius: 5%;" >
     <span style="margin-left: 1%;margin-top: 1%;display: block;border-right: 50%;width: 100px;height: 100px;background: #efefef;text-align: center;line-height: 100px;border-radius: 50%;"><img src="/NB/iff/img/xfc1.png" alt=""></span>
     <p style="float: right; margin-top: -3.5em;font-weight: bold;  font-size: 25px; color: #1AA094; margin-right:4em;">消防池设备</p>
     <p style="float: right; margin-top:-2em; font-size: 15px; font-weight: bold; margin-right:9em;" >设备总数:<span style="color: red;font-family: fantasy">&nbsp;2</span></p>
      <div style="margin-top:1%;margin-left:2%;font-size: 15px;font-weight: bold;position: relative;">
          <span><img src="/NB/iff/img/wz.png" alt=""></span>
         <p>位置</p>
         <div id="address" style="position: absolute;left: 3em;top: 1.2em;">
              <select class="select" id="province" name="province">
                <option value="">选择区域</option>
              </select>
              
              <select name="city" id="city">
                <option value="">选择建筑</option>
              </select>
          
              <select name="town" id="town">
                <option value="">选择房间</option>
              </select>
          </div>
          <a class="layui-btn layui-btn-mini" style="height: 30px;line-height: 30px;padding: 0 11px;font-size: 12px;position: absolute;left: 27.5em;top: 1.5em;" ><i class="iconfont icon-edit"></i> 查看</a>
      </div>
     <div style="margin-top: 4%;font-size: 15px;font-weight: bold;">
          <span style="display: block; margin-left: 2%; "><img style="width: 20px" src="/NB/iff/img/xfc2.png" alt=""></span>
         <p style="font-size: 15px;font-weight: bold;margin-top:-5%;margin-left:8%;">设备:<span style="color: red;">0000000000000001</span></p>
          <span style="margin-top: -5%;display: block;margin-left:52%;"><img style="width: 20px" src="/NB/iff/img/sy.png" alt=""></span>
         <p style="margin-top: -5%;margin-left:58%;">液位:<span style="color: red;">25</span><span>米</span></p>   
         <span style="margin-top: -5%;display: block;margin-left:75%;"><img style="width: 20px" src="/NB/iff/img/wd.png" alt=""></span>
         <p style="margin-top: -5%;margin-left: 80%;">温度:<span style="color: red;">25</span><span>℃</span></p>
      </div>
   </div>
</div>
<div> 
<div style="width: 48%;margin-left: 1.5%; float:left;">
  <p style="font-weight: bold;font-size: 15px;text-align: center;background-color:#23a79a;width: 810px;height: 1.3em;line-height: 1.3em">历史温度</p>
 <div id="container" style="min-width:400px;height:550px"></div>
</div>
<div style="width: 48%;margin-right: 1.5%; float:right;">
  <p style="font-weight: bold;font-size: 15px;text-align: center;background-color:#23a79a;height: 1.3em;line-height: 1.3em;margin-left: 0.7%">历史水压</p>
   <div id="chartdiv1" style="width: 100%; height: 550px;"></div>
</div>
</div>
</body>

 <script type="text/javascript" src="/NB/iff/js/jquery-3.2.0.min.js"></script>
 <script type="text/javascript" src="/pc/layui/layui.js"></script>
 <script type="text/javascript" src="/NB/iff/js/addres.js"></script>
 <!-- 历史水压插件 -->
 <script src="/NB/iff/js/amcharts.js" type="text/javascript"></script>
 <!-- 历史水压插件 -->
 <script src="/NB/iff/js/serial.js" type="text/javascript"></script>
 <!-- ;历史温度插件 -->
 <script src="/NB/iff/js/highcharts.js" type="text/javascript"></script>
   <script type="text/javascript">
    $(function(){
      $("#address").selectAddress()
      $("#town").focusout(function(){
        var province = $("#province option:selected").html()
        var city = $("#city option:selected").html()
        var town = $("#town option:selected").html()
        if(province!= '选择区域' && city!="选择建筑" && town!='选择房间'){
          console.log('区域：'+province+'\n建筑:'+city+'\n房间：'+town)
        } 
      })
    })
           // 历史水压
              var chart;
              var chartData = [];
              AmCharts.ready(function () {
                // generate some random data first
                generateChartData();

                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();

                chart.marginLeft = 0;
                chart.marginRight = 0;
                chart.marginTop = 0;
                chart.dataProvider = chartData;
                chart.categoryField = "date";

                // AXES
                // category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
                categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
                // value axis
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.inside = true;
                valueAxis.tickLength = 0;
                valueAxis.axisAlpha = 0;
                valueAxis.minimum = 100;
                valueAxis.maximum = 140;
                chart.addValueAxis(valueAxis);

                // GRAPH
                var graph = new AmCharts.AmGraph();
                graph.dashLength = 3;
                graph.lineColor = "#7717D7";
                graph.valueField = "visits";
                graph.dashLength = 3;
                graph.bullet = "round";
                chart.addGraph(graph);

                // CURSOR
                var chartCursor = new AmCharts.ChartCursor();
                chartCursor.cursorAlpha = 0;
                chart.addChartCursor(chartCursor);

                // GUIDES are used to create horizontal range fills
                var guide = new AmCharts.Guide();
                guide.value = 0;
                guide.toValue = 105;
                guide.fillColor = "#CC0000";
                guide.fillAlpha = 0.2;
                guide.lineAlpha = 0;
                valueAxis.addGuide(guide);

                var guide = new AmCharts.Guide();
                guide.value = 105;
                guide.toValue = 110;
                guide.fillColor = "#CC0000";
                guide.fillAlpha = 0.15;
                guide.lineAlpha = 0;
                valueAxis.addGuide(guide);

                var guide = new AmCharts.Guide();
                guide.value = 110;
                guide.toValue = 115;
                guide.fillColor = "#CC0000";
                guide.fillAlpha = 0.1;
                guide.lineAlpha = 0;
                valueAxis.addGuide(guide);

                var guide = new AmCharts.Guide();
                guide.value = 115;
                guide.toValue = 120;
                guide.fillColor = "#CC0000";
                guide.fillAlpha = 0.05;
                guide.lineAlpha = 0;
                valueAxis.addGuide(guide);

                var guide = new AmCharts.Guide();
                guide.value = 120;
                guide.toValue = 125;
                guide.fillColor = "#0000cc";
                guide.fillAlpha = 0.05;
                guide.lineAlpha = 0;
                valueAxis.addGuide(guide);

                var guide = new AmCharts.Guide();
                guide.value = 125;
                guide.toValue = 130;
                guide.fillColor = "#0000cc";
                guide.fillAlpha = 0.1;
                guide.lineAlpha = 0;
                valueAxis.addGuide(guide);

                var guide = new AmCharts.Guide();
                guide.value = 130;
                guide.toValue = 135;
                guide.fillColor = "#0000cc";
                guide.fillAlpha = 0.15;
                guide.lineAlpha = 0;
                valueAxis.addGuide(guide);

                var guide = new AmCharts.Guide();
                guide.value = 135;
                guide.toValue = 140;
                guide.fillColor = "#0000cc";
                guide.fillAlpha = 0.2;
                guide.lineAlpha = 0;
                valueAxis.addGuide(guide);

                // WRITE
                chart.write("chartdiv1");
    });
    // generate some random data
    function generateChartData() {
                var firstDate = new Date();
                firstDate.setDate(firstDate.getDate() - 10);

                for (var i = 0; i < 10; i++) {
     // we create date objects here. In your data, you can have date strings
     // and then set format of your dates using chart.dataDateFormat property,
     // however when possible, use date objects, as this will speed up chart rendering.
                    var newDate = new Date(firstDate);
                    newDate.setDate(newDate.getDate() + i);

                    var visits = Math.round(Math.random() * 40) + 100;

                    chartData.push({
                        date: newDate,
                        visits: visits
                    });
           }
       }

          // 历史温度
    var chart = Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    // title: {
    //     text: '平均温度'
    // },
    subtitle: {
        text: '数据来源:三七物联平台'
    },
    xAxis: {
        categories: ['周一', '周二', '周三', '周四', '周五', '周六',
                     '周日']
    },
    yAxis: {
        title: {
            text: '温度'
        },
        labels: {
            formatter: function () {
                return this.value + '°';
            }
        }
    },
    tooltip: {
        crosshairs: true,
        shared: true
    },
    plotOptions: {
        spline: {
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        }
    },
    series: [{
        name: '设备',
        marker: {
            symbol: 'diamond'
        },
        data: [{
            y: 5,
        }, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0]
    }]
});
  </script>
</html>